<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>延时消失的菜单</title>
<style>
  html, body, ul {
    margin: 0;
    padding: 0;
  }
  #header {
    width: 860px;
    margin: 10px auto;
  }
  li, #nav div {
    list-style: none;
    float: left;
    height: 100%;											/*多余还是撑开行高？？*/
    line-height: 30px;
  }
  a {
    text-decoration: none;
    color: #3C6EA8;
    padding: 0 15px;
    border-right: 1px solid #8F77C3;
  }
  a:hover {
    text-decoration: underline;
  }
  li:last-child a {
    border-right: none;
  }
  ul {
    overflow: hidden;
    background: #E3ECF1;
    border-radius: 10px;
    display: none;
  }
  #nav {
    background: #4273A5;
    width: 800px;
    height: 30px;
    border-radius: 20px;
    margin: 10px auto;
    padding: 4px 10px 4px 50px;
    color: #fff;									/* 多余 */
    display: block;								/* 多余 */
  }
  #nav a {
    color: #fff;
    display: block;
    border-radius: 10px;
    padding: 0 30px;
    border-right: none;
  }
  #nav a:hover {
    background: #7B9CC6;
    text-decoration: none;
  }
  #nav .last {
    float: right;
  }
  #nav .last a:hover {
    background: #4273A5;
  }

  #home {
    width: 350px;
    position: relative;
    left: 40px;		
  }
  #aboutUs {
    width: 380px;
    position: relative;
    left: 140px;
  }
  #showcase {
    width: 330px;
    position: relative;
    left: 280px;
  }  
  #blog {
    width: 470px;
    position: relative;
    left: 360px;
  }
</style>
<script>
	window.onload = function(){
		var timer = null;

		function $(id, tag){																							//是有包含关系的
			if(tag){
				return document.getElementById(id).getElementsByTagName(tag);
			} else {
				return document.getElementById(id);
			}		
		}

		for(var i=0; i<($('header', 'ul').length); i++){

			$('nav', 'a')[i].index = i;
			$('header', 'ul')[i].index = i;
			
			// 鼠标悬停在主导航链接上的动作
			$('nav', 'a')[i].onmouseover = function(){
				for(var j=0; j<$('header', 'ul').length; j++){					//可以用i
					$('header', 'ul')[j].style.display = 'none';
				}
				$('header', 'ul')[this.index].style.display = 'block';
				clearTimeout(timer);
			}
			
			// 鼠标离开主导航链接上的动作
			$('nav', 'a')[i].onmouseout = function(){
				var that = this.index;
				timer = setTimeout(function(){
					$('header', 'ul')[that].style.display = 'none';
				}, 200)
			}

			// 鼠标悬停在子导航条上的动作
			$('header', 'ul')[i].onmouseover = function(){					
				this.style.display = 'block';
				clearTimeout(timer);
			}

			//鼠标离开子导航条的动作
			$('header', 'ul')[i].onmouseout = function(){
				var that = this;
				timer = setTimeout(function(){
					that.style.display = 'none';
				}, 1500)
			}
		}			
	}
</script>	
<body>
	<div id="header">
		<div id="nav">
			<div><a href="javascript:">首页</a></div>
			<div><a href="javascript:">关于我们</a></div>
			<div><a href="javascript:">作品</a></div>
			<div><a href="javascript:">博客</a></div>
			<div class="last"><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">&gt;&gt;更多</a></div>
		</div>
		<ul id="home">
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">最近更新</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">活动</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">报名试听</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">学员反馈</a></li>
		</ul>
		<ul id="aboutUs">
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">妙味课堂</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">培训方式</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">培训理念</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">联系我们</a></li>
		</ul>
		<ul id="showcase">
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">般固</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">MATRIX</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">留学E网</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">ECMall</a></li>
		</ul>
		<ul id="blog">
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">JS教程</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">弹出层效果</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">3D球面标签云</a></li>
			<li><a href="http://fantaghiro.github.io/miaov/JS_Basic_Lessons/8-2.html#">Windows计算器</a></li>
		</ul>
	</div>
</body>
</html>